<template>
  <view class="course-play">
    <!-- #ifndef APP-PLUS -->
    <video id="myVideo" style="width: 750rpx;height: 423rpx;" :src="state.src" :poster="state.poster"></video>
    <!-- #endif -->

    <!-- 标题 -->
    <view class="space-between course-info">
      <text class="title">{{course.title}}</text>
      <view class="right" @click="goToDeatilPage">
        <text>详情</text>
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    
    <!-- 课程列表 -->
    <courseDir :isBuy="true" :chapterList="dirList" :activeObj="activeObj" @playVideo="changeVideo"></courseDir>

    <!-- 底部按钮，分享和评价 -->
    <view class="bottom center">
      <!-- #ifdef APP-PLUS -->
      <view class="btn-item one column" @click="shareCourse">
        <text class="iconfont icon-Share-Outline"></text>
        <text>分享</text>
      </view>
      <!-- #endif -->
      <view class="btn-item one column" @click="openComment">
        <text class="iconfont icon-edit"></text>
        <text>评价</text>
      </view>
    </view>
    
    <!-- 分享 -->
    <share ref="shareRef" :shareData="course"></share>
    
    <!-- 评论组件 -->
    <comment ref="commentRef" @subComment="subComment"></comment>
  </view>
</template>

<script setup lang="ts">
  import {
    reactive,
    ref,
    getCurrentInstance
  } from 'vue'
  import {
    onReady,
    onLoad
  } from '@dcloudio/uni-app'
  import courseDir from './components/course-dir.vue'
  import api from '@/api/course.js'

  const state = reactive({
    src: '',
    poster: ''
  })
  const {
    proxy
  } = getCurrentInstance()
  let videoContext = null;
  let activeObj = reactive({
    chapterIndex:0,
    sectionIndex:0
  })
  let course = ref({})
  let dirList = ref([])
  const shareRef = ref()
  const commentRef = ref()

  onLoad((option) => {
    getData(option.id)
  })
  
// 点击章节切换播放事件
const changeVideo = (obj)=>{
  activeObj.chapterIndex = obj.chapterIndex
  activeObj.sectionIndex = obj.sectionIndex
  // #ifndef APP-PLUS
  videoContext.pause()
  state.src = obj.section.videoUrl
  setTimeout(()=>{
    videoContext.play()
  },300)
  // #endif
  
  // #ifdef APP-PLUS
  uni.$emit('video',{
    type:'change',
    params:{
      activeObj:activeObj,
      section:obj.section
    }
  })
  // #endif
  
  
}

// 点击分享课程事件
const shareCourse = ()=>{
  // #ifdef APP-PLUS
  shareRef.value.showHandler()
  // #endif
}

// 点击详情回到课程的详情页
const goToDeatilPage = ()=>{
  proxy.navTo(`/pages/course/course-details?id=${course.value.courseId}`)
}
// 获取当前的数据
  const getData = async (id) => {
    const courseRes = await api.getCourseDetail(id)
    const dirRes = await api.getCourseSection(id)
    course.value = courseRes.data
    dirList.value = dirRes.data
    // #ifndef APP-PLUS
    state.poster = courseRes.data.mainImage
    const chapter = dirList[activeObj.chapterIndex]
    const section = chapter && chapter.sectionList[activeObj.sectionIndex]
    state.src = section && section.videoUrl || ''
    // #endif
    
    // #ifdef APP-PLUS
    uni.$emit('video',{
      type:'init',
      params:{
        course:course.value,
        chapterList:dirList.value,
        activeObj:activeObj
      }
    })
    // #endif
    
  }

  onReady(() => {
    // #ifndef APP-PLUS
    videoContext = uni.createVideoContext('myVideo', proxy)
    // #endif
  })
  
   // 弹出评论事件
  const openComment  = ()=>{
    commentRef.value.show()
  }
  // 评论提交事件
  const subComment = async (comment)=>{
    uni.showLoading({
      title:"提交中",
      mask:true
    })
    comment.courseId = course.value.courseId
    const res = await api.addCourseComment(comment)
    if(res.code === 20000){
      uni.hideLoading()
      comment.content = ''
      proxy.$utils.msg("评论成功")
      commentRef.value.show()
    }else{
      uni.hideLoading()
      proxy.$utils.msg("评论失败")
    }
    
    
  }
</script>

<style scoped lang="scss">
  .course-play {
    padding-bottom: 100rpx;
  }

  .course-info {
    padding-left: 30rpx;
    font-weight: bold;
    border-bottom: 0.5px solid #efeff4;

    .title {
      width: 500rpx;
      font-size: 35rpx;
      line-height: 90rpx;
      color: #1d1d1f;
    }

    .right>text {
      font-size: 28rpx;
      line-height: 90rpx;
      color: #1d1d1f;
    }
  }

  .bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background-color: #fff;
    border-top: 0.5px solid #efeff4;

    .btn-item {
      text {
        text-align: center;
        color: #1d1d1f;
        font-size: 25rpx;
      }

      .iconfont {
        font-size: 38rpx;
      }
    }
  }
</style>
